<template>
  <div>
    <div class="section-title">收藏商品</div>
    <el-table :data="favoriteGoods" border stripe style="width: 100%; margin-bottom: 24px;">
      <el-table-column prop="idx" label="序号" width="80" />
      <el-table-column prop="product" label="商品信息" width="200" />
      <el-table-column prop="time" label="收藏时间" width="180" />
      <el-table-column prop="category" label="所属分类" />
    </el-table>
    <div class="section-title">收藏卖家</div>
    <el-table :data="favoriteSellers" border stripe style="width: 100%">
      <el-table-column prop="idx" label="序号" width="80" />
      <el-table-column prop="nickname" label="卖家昵称" width="140" />
      <el-table-column prop="contact" label="联系方式" width="180">
        <template #default="scope">
          {{ maskPhone(scope.row.contact) }}
        </template>
      </el-table-column>
      <el-table-column prop="time" label="收藏时间" width="180" />
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue';
const props = defineProps<{ favoriteGoods: any[]; favoriteSellers: any[] }>();
function maskPhone(phone: string) {
  if (!phone) return '';
  return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
}
</script>

<style scoped>
.section-title {
  font-weight: bold;
  margin: 16px 0 8px 0;
}
</style> 